import { useEffect, useState } from 'react'
import Taro, { FC, useReachBottom } from "@tarojs/taro"
import { View, Image } from "@tarojs/components" 
import "taro-ui/dist/style/components/tabs.scss";
import { useFansFacade } from '@/hooks/useFansFacade';
import { FansItem  } from '@/models/request/userReq';
import './index.scss'

//粉丝
export const MyFans: FC = () => { 

  const [roomsFacade, pagination] = useFansFacade(); //查找我关注的主播
  const [dataList, setDataList] = useState([] as FansItem[])
  
  const [isAttention, setIsAttention] = useState(false)  //是否关注了  

  //是否点击了关注
  const isClickAttention = () => {
    setIsAttention(!isAttention)
  } 

  //监听系统通知
  useEffect(() => {
    //页面销毁时也销毁所有订阅，防止内存泄漏
    return () => {
      roomsFacade.destroy();
    };
  }, []);

  useReachBottom(() => {
    //上拉获取翻页记录
    roomsFacade.nextPage();
  })

  //下拉添加主播关注数据
  useEffect(() => {
    console.log('打印主播值', pagination);
    if (pagination && pagination.data && pagination.data.length > 0) {
      const list = dataList.concat(pagination.data);
      setDataList(list)
    }
  }, [pagination, dataList])

  
  return (
    <View className='index'>
      <View className='main'>  
      {
          dataList && dataList.map((item,index)=>(
            <View className='content' key={index}>
              <View className='left'>
                <Image className='tx_img' src={item.avatar}  ></Image>
              </View>
              <View className='right'> 
                  <View className='useName'>{item.nickName}</View>  
                <View className={isAttention ? 'attention1' : 'attention'} onClick={isClickAttention}>{isAttention ? '已关注' : '关注'}</View>
              </View>
            </View>
          ))
      }  
      </View>
    </View>
  )
}
export default MyFans